<template>
  <div id="">
    <div class="view-lable-project">
      <div class="view-lable-project-nav">
        <div @click="goBack" class="goback">
          <el-icon class="el-icon-arrow-left"><ArrowLeft /></el-icon>
        </div>

        <div class="project-list">
          <div
            :class="item.isActive ? 'item active' : 'item'"
            v-for="(item, index) in projectList"
            :key="item.id"
            @click="toggleNav(index)"
          >
            <span class="name">{{ `查看${item.id}` }}</span>
            <div
              @click.stop="delNav(index)"
              :class="item.isActive ? 'el-icon-error' : 'el-icon-close'"
            >
              <el-icon><Close /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <div :class="fixed ? 'fixed project-info-nav' : 'project-info-nav'">
        <div
          :class="item.isActive ? 'item active' : 'item'"
          v-for="(item, index) in projectInfoNav"
          :key="index"
          @click="toggleProjectInfoNav(index)"
        >
          <span class="name">{{ item.name }}</span>
        </div>
      </div>

      <div class="project-info-container">
        <div class="project-info-content">
          <div class="project-title">
            <div class="project-id">任务ID: {{ model.taskInfo.id }}</div>
            <el-row>
              <el-col :span="6">
                <span class="label">创建人：</span
                >{{ model.taskInfo.createUser?.userName }}
              </el-col>
              <el-col :span="6">
                <span class="label">创建时间：</span
                >{{ handleDate(model.taskInfo.createTime) }}
              </el-col>
              <el-col :span="6">
                <span class="labe">项目状态：</span>
                <span v-if="model.taskInfo.status === 0" style="color: #ff8800"
                  >未发布</span
                >
                <span v-if="model.taskInfo.status === 1" style="color: #0dab76"
                  >进行中</span
                >
                <span v-if="model.taskInfo.status === 2" style="color: #333333"
                  >已完成</span
                >
                <span v-if="model.taskInfo.status === 3" style="color: #999999"
                  >已终结</span
                >
              </el-col>
            </el-row>
          </div>
          <div class="border"></div>

          <div class="project-info-base">
            <div class="title" id="任务信息">任务信息</div>
            <el-row>
              <el-col :span="24">
                <span class="label">任务名称：</span>{{ model.taskInfo.name }}
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span class="label">科室：</span
                >{{ handledepartment(model.taskInfo.department) }}
              </el-col>
              <el-col :span="6">
                <span class="label">任务标签：</span>
                {{ getName(taskLabels, model.taskInfo.label) }}
              </el-col>
              <el-col :span="6">
                <span class="label">任务目标：</span
                >{{ getName(taskTargets, model.taskInfo.target) }}
              </el-col>
              <el-col :span="6">
                <span class="label">任务用途：</span
                >{{ getName(usess, model.taskInfo.uses) }}
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <span class="label">废片原因：</span
                >{{ getName(discardReasons, model.taskInfo.discardCode) }}
              </el-col>
            </el-row>
          </div>
          <div class="border"></div>

          <div class="project-info-base">
            <div class="title" id="标注信息">标注信息</div>
            <el-row>
              <el-col :span="24">
                <span class="label">标注客户端：</span>{{ getLabelInfo() }}
              </el-col>
            </el-row>
            <div class="sub-title">整体病症组件</div>
            <table-pagination
              :data="{
                list: seriesFcListData || [],
                ...pagination,
                total: seriesFcListData.length,
              }"
              frontPagination
              className="table-set el-table-new"
              style="width: 100%; margin-top: 8px"
              stripe
            >
              <el-table-column label="序号" type="index" width="68px"> </el-table-column>
              <el-table-column prop="code" label="标注字段编码"> </el-table-column>
              <el-table-column label="标注字段名称">
                <template #default="scope">
                  <span class="label-name" @click="formComponentRead(scope.row)">{{
                    scope.row.name
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="控件类型">
                <template #default="scope">
                  <span>{{ ControlTypes[scope.row.type] || "" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="标签">
                <template #default="scope">
                  <span class="">{{
                    scope.row.tagList ? scope.row.tagList.toString() : "--"
                  }}</span>
                </template>
              </el-table-column>

              <el-table-column label="是否必填">
                <template #default="scope">
                  <span>{{ scope.row.required ? "是" : "否" }}</span>
                </template>
              </el-table-column>
            </table-pagination>

            <div class="title">影像布局</div>
            <div class="layout">
              <div :class="isActive ? 'layout-item active' : 'layout-item'">
                <div class="layout-header" @click="openContent">
                  <span class="icon-triangle"></span>
                  <span class="header-title">{{
                    getName(imageLayouts, model.annoInfo.imageLayout)
                  }}</span>
                </div>
                <div class="layout-content">
                  <div class="layout-type">
                    <el-form class="basic-info-content" label-width="82px">
                      <el-table
                        :data="lesionListData"
                        style="width: 100%"
                        class="el-table-new"
                      >
                        <el-table-column label="序号" type="index" width="80px">
                        </el-table-column>

                        <el-table-column label="标注类型">
                          <template #default="scope">
                            <p>{{ scope.row.name }}</p>
                          </template>
                        </el-table-column>

                        <el-table-column label="选择颜色">
                          <template #default="scope">
                            <el-color-picker
                              :disabled="true"
                              v-model="scope.row.color"
                            ></el-color-picker>
                          </template>
                        </el-table-column>

                        <el-table-column label="标注工具">
                          <template #default="scope">
                            <el-select
                              :disabled="true"
                              class="disabled-reset"
                              multiple
                              v-model="scope.row.toolValueList"
                              placeholder=""
                            >
                              <el-option
                                v-for="item in toolOptions"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value"
                              ></el-option>
                            </el-select>
                          </template>
                        </el-table-column>

                        <el-table-column label="标注组件">
                          <template #default="scope">
                            <el-select
                              :disabled="true"
                              class="disabled-reset"
                              multiple
                              v-model="scope.row.imageFcListValues"
                              placeholder=""
                            >
                              <el-option
                                v-for="item in scope.row.seriesFcListData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                              ></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column label="病灶设置">
                          <template #default="scope">
                            <el-select
                              class="disabled-reset"
                              :disabled="true"
                              v-model="scope.row.bizType"
                              placeholder=""
                            >
                              <el-option
                                v-for="item in lesionBizTypes"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                              ></el-option>
                            </el-select>
                          </template>
                        </el-table-column>

                        <!-- <el-table-column label="AI">
                          <template #default="scope">
                            <el-select
                              :disabled="true"
                              class="disabled-reset"
                              v-model="scope.row.AI"
                              placeholder=""
                            >
                              <el-option
                                v-for="item in AIList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                              ></el-option>
                            </el-select>
                          </template>
                        </el-table-column> -->

                        <el-table-column label="操作">
                          <template #default="scope">
                            <div class="handle">
                              <el-button
                                size="mini"
                                @click="checkImageFcList(scope, true)"
                                >查看组件</el-button
                              >
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-form>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="border"></div>

          <div class="addData">
            <div class="ser-header">
              <span class="ser-title" id="任务序列">任务序列</span>
              <el-button @click="handleViewImport">查看已导入标注结果</el-button>
            </div>
            <div class="table-content1">
              <table-pagination
                :data="{
                  list: model.dataInfo.seriesList || [],
                  ...pagination,
                  total: (model.dataInfo.seriesList || []).length,
                }"
                frontPagination
                className="table-seriesFcList el-table-new"
                style="width: 100%; margin-top: 13px"
                stripe
              >
                <el-table-column type="index" width="140" label="序号" />

                <el-table-column label="序列号" >
                  <template #default="scope">
                    <p class="overflow-ellipsis" :title="scope.row.seriesUid">
                      {{ scope.row.seriesUid }}
                    </p>
                  </template>
                </el-table-column>
                <el-table-column prop="modality" width="140" label="检查机型" />
                <el-table-column prop="bodyPart" width="140" label="部位" />
                <el-table-column prop="fileType" width="140" label="文件类型" />
                <el-table-column prop="refResultTaskId" width="140" label="标注结果">
                  <template #default="scope">
                    <p class="overflow-ellipsis" :title="scope.row.refResultTaskId">
                      {{ [-1, null].includes(scope.row.refResultTaskId) ? '无' : scope.row.refResultTaskId }}
                    </p>
                  </template>
                </el-table-column>
              </table-pagination>
            </div>
          </div>

          <div class="border"></div>

          <div class="project-info-base">
            <div class="title" id="标注人员信息">标注人员信息</div>
            <el-row>
              <el-col :span="6">
                <span class="label">开始时间：</span
                >{{ handleDate(model.annoUserInfo.beginDate) }}
              </el-col>
              <el-col :span="6">
                <span class="label">结束时间：</span
                >{{ handleDate(model.annoUserInfo.endDate) }}
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span class="label">任务方式：</span>
                {{ getName(pubMethodOptions, model.annoUserInfo.pubMethod) }}
              </el-col>
            </el-row>
            <el-row v-show="isOpen">
              <el-col :span="6">
                <span class="label">可参与人员：</span>
                {{ model.annoUserInfo.totalUserNum }}
              </el-col>
            </el-row>
            <div class="sub-title" v-show="isContract">标注单位列表</div>
            <div class="table-content1" v-show="isContract">
              <el-table
                :data="model.annoUserInfo.annoUserList || []"
                className="table-seriesFcList el-table-new"
                style="width: 100%; margin-top: 13px"
                stripe
              >
                <el-table-column type="index" width="140" label="序号" />
                <el-table-column label="标注单位" width="536px">
                  <template #default="scope">
                    <span class="">{{ scope.row.company?.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="可选名单">
                  <template #default="scope">
                    <span class="">{{
                      (scope.row.userList || []).map((item) => item.userName).join(",")
                    }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-row>
              <el-col :span="6">
                <span class="label">任务备注：</span>
                {{ model.annoUserInfo.remark }}
              </el-col>
            </el-row>
          </div>
          <div class="border"></div>
          <div class="project-info-base" id="预处理信息">
            <el-row>
              <el-col :span="22" style='color:#333333;font-size: 16px;font-weight: 700;'>预处理信息</el-col>
              <el-col :span="2">
                <el-button @click="handleExportProcess">导出结果</el-button>
              </el-col>
            </el-row>
            <el-row v-if="model.annoInfo.imageLayout === 'VIDEO_ANNO'">
              <el-col :span="4"><span class="label">转换模式：</span>{{videoMode}}</el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="4"><span class="label">算法模型：</span>{{}}</el-col>
              <el-col :span="4"><span class="label">模型版本：</span>{{}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4"><span class="label">成功数量：</span>{{processInfo.sucCount || 0}}</el-col>
              <el-col :span="4"><span class="label">失败数量：</span>{{processInfo.failCount || 0}}</el-col>
              <el-col :span="4"><span class="label">处理中数量：</span>{{processInfo.processCount || 0}}</el-col>
              <el-col :span="4"><span class="label">未开始数量：</span>{{processInfo.notStartCount || 0}}</el-col>
              <el-col :span="4"><span class="label">暂停数量：</span>{{processInfo.pauseCount || 0}}</el-col>
              <el-col :span="4"><span class="label">新增数量：</span>{{processInfo.addCount || 0}}</el-col>
            </el-row>
          </div>
          <div class="border"></div>
        </div>
      </div>
    </div>

    <el-dialog
      title="查看已添加的标注数据"
      v-model="currentLesionListItem.visible"
      class="el-dialog-style"
      width="820px"
      center
    >
      <el-table
        :data="currentLesionListItem.seriesFcListData || []"
        style="width: 100%"
        stripe
        class="el-table-new"
      >
        <el-table-column label="序号" type="index" width="80px"> </el-table-column>
        <el-table-column prop="code" label="标注字段编码"> </el-table-column>
        <el-table-column label="标注字段名称">
          <template #default="scope">
            <span class="label-name" @click="formComponentRead(scope.row)">{{
              scope.row.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="控件类型">
          <template #default="scope">
            <span class="">{{ ControlTypes[scope.row.type] || "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标签">
          <template #default="scope">
            <span class="">{{
              scope.row.tagList ? scope.row.tagList.toString() : "--"
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="是否必填">
          <template #default="scope">
            <span>{{ scope.row.required ? "是" : "否" }}</span>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="hideCurrentLesionListItem">取 消</el-button> -->
        <el-button type="primary" @click="hideCurrentLesionListItem">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="查看已导入标注结果"
        v-model="viewImportAnno.show"
        class="el-dialog-style"
        width="820px"
        center
    >
      <el-table
          :data="viewImportAnno.tableData"
          style="width: 100%"
          stripe
          class="el-table-new"
          height="300"
      >
        <el-table-column prop="userId" label="导入人ID"></el-table-column>
        <el-table-column prop="createTime" label="导入时间" width="180">
          <template #default="scope">
            <span>{{ moment(scope.row.createTime).format('YYYY-MM-DD hh:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="importType" label="结果类型">
          <template #default="scope">
            <span>{{ AnnoResultTypeEnum[scope.row.importType] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="seriesCount" label="总序列数"> </el-table-column>
        <el-table-column prop="resultCount" label="总结果数"> </el-table-column>
      </el-table>
    </el-dialog>

    <form-component v-model="formComponentVisible" :id="formComponentId"></form-component>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import router from "@/router";
import { getUrlParams, open } from "@/utils/window";
import {
  annoTask,
  toolSearch,
  lesionGroupSearch,
  formComponentRead,
  formComponentSearch,
  getProcessInfo,
} from "@/api/projectDetail/projectDetail";
import moment from "moment";
import { toggleEnumValue, ControlTypes, Gender, taskStatus } from "@/utils/emun";
import { Close, ArrowLeft } from "@element-plus/icons-vue";
import { commonList } from "@/api/common/common";
import TablePagination from "@/components/table-pagination/index.vue";
import FormComponent from "@/components/formComponent/formComponent.vue";
import useUtils from "@/views/dimensioning/project/hooks/useUtils";
import { getImportAnnoData } from "@/api/project/project";
import { ElMessage } from "element-plus";

const { handleExport, AnnoResultTypeEnum } = useUtils();
const model = {
  annoInfo: {
    seriesFcList: [],
    lesionList: [],
  },
  annoUserInfo: {
    annoUserList: [],
  },
  dataInfo: {
    seriesList: [],
  },
  taskInfo: {},
};

export default {
  name: "",
  components: {
    TablePagination,
    FormComponent,
  },
  data() {
    const [projectId, backPath] = getUrlParams(["projectId", "backPath"]);
    return {
      Close,
      ArrowLeft,
      taskStatus,
      ControlTypes,
      toggleEnumValue,
      projectId,
      backPath,
      projectList: [],
      projectInfo: {},
      projectInfoNav: [
        { name: "任务信息", isActive: true },
        { name: "标注信息", isActive: false },
        { name: "任务序列", isActive: false },
        { name: "标注人员信息", isActive: false },
        { name: '预处理信息' , isActive: false },
      ],
      title: "影像布局",
      baseColor: "#448E97",

      AIList: [{ name: "AI自动生成", id: 1 }],
      isActive: true,
      visible: false,
      moment,
      importMaskResultVisible: false,

      currentPage: 1,
      total: 0,
      pageSize: 10,

      model: model,
      departmentList: [],
      taskLabels: [],
      taskTargets: [],
      usess: [],
      discardReasons: [],
      windows: [],
      imageLayouts: [],
      imageAnnos: [],

      pubMethodOptions: [
        { name: "开放式", value: 1 },
        { name: "承包式", value: 2 },
      ],

      formComponentVisible: false,
      formComponentId: [],

      pagination: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      currentLesionListItem: {
        visible: false,
        seriesFcListData: [],
      },
      viewImportAnno:{//查看已导入标注结果弹框
        show: false,
        tableData:[]
      },
      AnnoResultTypeEnum: AnnoResultTypeEnum,
      fixed: false,

      seriesFcListData: [],
      lesionListData: [],
      toolOptions: [],
      lesionBizTypes: [],
      imageTransferModes:[],//超声视频转换模式选项
      processInfo:{},//预处理信息
    };
  },
  watch: {
    projectList: {
      deep: true,
      handler: function (list) {
        localStorage.setItem("projectList", JSON.stringify(list));
        const index = list.findIndex((item) => item.isActive);
        if (index > -1) {
          this.setProjectInfo(list[index].id);
        }
      },
    },
  },
  computed: {
    isOpen() {
      return this.model.annoUserInfo.pubMethod == 1;
    },
    isContract() {
      return this.model.annoUserInfo.pubMethod == 2;
    },
    videoMode(){
      const item = this.imageTransferModes && this.imageTransferModes.find((it)=> it.value === this.processInfo.mode)
      if(!item) return ''
      return item.name
    },
  },
  async created() {
    this.init();
    document.onscroll = () => {
      const top = document.documentElement.scrollTop || document.body.scrollTop;
      this.fixed = top >= 90;
    };
  },
  methods: {
    async getComponentTableData(ids) {
      const res = await formComponentRead(ids);
      return res.data.list;
    },
    
    getLabelInfo() {
      const {
        defaultWindow,
        diagnosis,
        findings,
        showReport,
        showYay,
      } = this.model.annoInfo;
      const config = {
        defaultWindow: () => {
          return defaultWindow ? `设置默认窗宽窗位 ${defaultWindow}` : "";
        },
        diagnosis: "需要展示诊断所得",
        findings: "需要展示检查所见",
        showReport: "需要图文报告",
        showYay: () => {
          let text = "需要阴阳性";
          return text;
        },
      };

      const list = [];
      Object.keys(this.model.annoInfo).forEach((key) => {
        const value = this.model.annoInfo[key];
        const configvalue = config[key];
        if (configvalue) {
          if (typeof configvalue === "function") {
            list.push(configvalue.call(this));
          }
          if (typeof configvalue === "string" && value) {
            list.push(configvalue);
          }
        }
      });
      return list.filter((item) => item).join("、");
    },
    getName(list, values, valueKey, listKey, a) {
      let _values;
      if (typeof values === "string" && values.indexOf(",") > -1) {
        _values = values.split(",");
      } else {
        _values = values;
      }
      if (typeof _values === "string" || typeof _values === "number") {
        return this.getNameSingle(list, _values, valueKey, listKey);
      }
      if (Array.isArray(_values)) {
        const array = _values.map((value) => {
          return this.getNameSingle(list, value, valueKey, listKey, a);
        });
        return array.join(", ");
      }
      return "";
    },
    getNameSingle(list, value, valueKey = "name", listKey = "value", a) {
      if (value === undefined || value === null || !Array.isArray(list)) return null;
      const item = list.find((item) => item[listKey] == value);
      return item ? item[valueKey] : "";
    },
    handledepartment(id) {
      return this.getName(this.departmentList, id, "name");
    },
    handleDate(date) {
      if (!date) return date;
      return this.moment(date).format("YYYY-MM-DD");
    },
    handleDateAndTime(time) {
      if (!time) return time;
      return this.moment(time).format("YYYY-MM-DD HH:mm:ss");
    },
    async init() {
      const projectList = localStorage.getItem("projectList");
      if (projectList) {
        this.projectList = JSON.parse(projectList);
        const index = this.projectList.findIndex((item) => item.id === this.projectId);
        if (index > -1) {
          const currentItem = this.projectList.splice(index, 1);
          this.projectList.unshift(...currentItem);
        } else {
          this.projectList.unshift({ id: this.projectId, isActive: true });
        }
        this.toggleNav(0);
      } else {
        this.projectList.push({
          id: this.projectId,
          isActive: true,
        });
      }

      const res = await commonList();
      const listData = res.data || {};
      this.departmentList = listData.departments || [];
      this.taskLabels = listData.taskLabels || [];
      this.taskTargets = listData.taskTargets || [];
      this.usess = listData.taskUses || [];
      this.discardReasons = listData.discardReasons || [];

      this.windows = listData.windows || [];
      this.imageLayouts = listData.imageLayouts || []; //影像布局
      this.imageAnnos = listData.imageAnnos || [];
      this.lesionBizTypes =
        listData.lesionBizTypes?.map((item) => ({
          name: item.name,
          id: +item.value,
        })) || [];
      this.imageTransferModes = listData.imageTransferModes || []

      const toolRes = await toolSearch({
        page: 1,
        pageSize: 1000,
      });
      this.toolOptions = toolRes?.data?.list || [];
    },
    goBack() {
      router.push({
        path: "/dimensioning/project",
      });
    },
    toggleNav(index) {
      if (index >= this.projectList.length) return;
      this.projectList.forEach((item) => (item.isActive = false));
      this.setProjectList(index, "isActive", true);
    },
    delNav(index) {
      this.projectList.splice(index, 1);
      const length = this.projectList.length;
      if (length == 0) {
        this.goBack();
        return;
      }
      const hasActive = this.projectList.some((item) => item.isActive);
      if (!hasActive) {
        let currentIndex = index == length ? index - 1 : 0;
        this.setProjectList(currentIndex, "isActive", true);
      }
    },
    setProjectList(index, key, value) {
      const projectList = JSON.parse(JSON.stringify(this.projectList));
      projectList[index][key] = value;
      this.projectList = projectList;
    },
    async setProjectInfo(projectId) {
      const model = (await annoTask(projectId)).data;
      this.model = model;
      
      await this.handleProcessInfo(projectId)
      await this.setSeriesFcListData();
      await this.setLesionListData();
      // await this.setViewImportAnno(projectId);
    },
    async setSeriesFcListData() {
      console.log(this.model.annoInfo.seriesFcList, "this.model.annoInfo.seriesFcList");
      const seriesFcList = this.model.annoInfo.seriesFcList || [];
      this.seriesFcListData = await this.getSeriesFcListData(seriesFcList);
    },
    // 设置查看组件数据
    async getSeriesFcListData(seriesFcList) {
      const ids = (seriesFcList || []).map((item) => item.fcId);
      console.log(ids, "asasdasdaasd");
      const res = await formComponentSearch({ ids, pageSize: ids.length });
      const seriesFcListData = seriesFcList.map((item) => {
        const resItem = res.data.list.find((subItem) => subItem.id == item.fcId);
        return {
          ...resItem,
          ...item,
        };
      });
      return seriesFcListData;
    },
    async formComponentRead({ id }) {
      this.formComponentId = id;
      this.formComponentVisible = true;
    },
    async setLesionListData() {
      const lesionList = this.model.annoInfo.lesionList || [];
      const lesionListData = [];
      for (let i = 0; i < lesionList.length; i++) {
        const item = lesionList[i];
        const seriesFcListData = await this.getSeriesFcListData(item.imageFcList);
        const labelTypeItem = await this.getLabelTypeItem(item.lesionValue);
        lesionListData.push({
          AI: 1,
          ...item,
          name: labelTypeItem.name,
          imageFcListValues: (item.imageFcList || []).map((item) => item.fcId),
          seriesFcListData,
          visible: false,
        });
      }
      this.lesionListData = lesionListData;
    },
    // 获取 标注类型 的列表数据
    async getLesionGroup() {
      const model = {
        page: 1,
        pageSize: 10000,
        name: "",
      };
      const res = await lesionGroupSearch(model);
      const lesionGroups = (res.data.list || []).map((item) => {
        if (!item.childs?.length) {
          delete item.childs;
        }
        return item;
      });
      return lesionGroups;
    },
    // 获取标注类型的数据
    async getLabelTypeItem(lesionValue) {
      let labelTypeItem;
      const lesionGroups = await this.getLesionGroup();
      lesionGroups.forEach((item) => {
        if (labelTypeItem) return;
        const { childs } = item;
        if (item.value === lesionValue) {
          labelTypeItem = item;
        }
        if (Array.isArray(childs)) {
          childs.forEach((subItem) => {
            if (subItem.value === lesionValue) {
              labelTypeItem = subItem;
            }
          });
        }
      });
      return labelTypeItem;
    },
    async checkImageFcList({ $index, row }, visible) {
      const data = JSON.parse(JSON.stringify(this.lesionListData));
      data[$index].visible = visible;
      this.currentLesionListItem = data[$index];
      this.lesionListData = data;
    },
    hideCurrentLesionListItem() {
      this.currentLesionListItem.visible = false;
    },

    isValidArray(obj) {
      return Array.isArray(obj) && !!obj.length;
    },
    toggleProjectInfoNav(index) {
      const projectInfoNav = JSON.parse(JSON.stringify(this.projectInfoNav));
      projectInfoNav.forEach((item) => (item.isActive = false));
      projectInfoNav[index].isActive = true;
      this.projectInfoNav = projectInfoNav;
      document
        .querySelector(`#${this.projectInfoNav[index].name}`)
        .scrollIntoView({ behavior: "smooth" });
    },
    async handleProcessInfo(taskId){
      const res = await getProcessInfo({taskId});
      this.processInfo = res.data
    },
    handleExportProcess(){
      handleExport(this.model.taskInfo.id)
    },
    handleViewImport(){
      this.viewImportAnno.show = true
      this.setViewImportAnno()
    },
    async setViewImportAnno(taskId) {
      const res = await getImportAnnoData({taskId: +taskId || this.model.taskInfo.id})
      if(res.code === 200){
        this.viewImportAnno.tableData = res.data.list
      }else{
        ElMessage.warning("未查到结果")
      }
    },
  },
};
</script>

<style lang="less" scoped>
.view-lable-project {
  background-color: #f5f5f5;

  .el-select__tags-text {
    overflow: unset !important ;
    text-overflow: unset !important;
    white-space: unset !important;
  }
  .el-tag {
    max-width: 100% !important;
  }
  .el-pagination__sizes,
  .el-pagination .el-select .el-input {
    margin-right: 0;
  }
  .el-pagination {
    padding-right: 0;
  }
  .view-lable-project-nav {
    width: 100%;
    height: 30px;
    display: flex;
    background: #fff;
    .goback {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-icon-arrow-left {
      width: 44px;
      line-height: 30px;
      display: flex;
      justify-content: center;
      cursor: pointer;
      &::before {
        font-size: 18px;
      }
    }
    .project-list {
      display: flex;
      .item {
        width: 100px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        cursor: pointer;
        padding: 0 3px 0 8px;
        .name {
          font-size: 14px;
        }
        i::before {
          font-size: 4px;
        }
        &.active {
          background: #f5f5f5;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          .name {
            color: #448e97;
          }
          i::before {
            color: #c0c4cc;
          }
        }
      }
    }
  }

  .project-info-nav {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    &.fixed {
      position: fixed;
      left: 220px;
      top: 0px;
      z-index: 100;
      background: #f5f5f5;
      width: 100%;
    }
    .item {
      width: 104px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      span {
        font-weight: 400;
        font-size: 16px;
        line-height: 21px;
        color: #333;
      }
      &.active {
        span {
          font-weight: 700;
          box-sizing: border-box;
          position: relative;
          &::before {
            content: "";
            display: block;
            width: 100%;
            height: 3px;
            background: #448e97;
            position: absolute;
            left: 0;
            bottom: -4px;
            border-radius: 5px;
          }
        }
      }
    }
  }

  .project-info-container {
    height: calc(100vh - 145px);
    overflow: auto;
    background: #f5f5f5;
    padding: 0 16px 16px 16px;
  }

  .project-info-content {
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    padding: 0 32px;
    .project-title {
      padding-top: 32px;
      .project-id {
        font-weight: 700;
        font-size: 20px;
        color: #448e97;
      }
    }
    .el-row {
      margin-top: 22px;
    }
    .border {
      width: 100%;
      height: 1px;
      background: #e8e8e8;
      margin-top: 32px;
    }
    .title {
      font-weight: 700;
      font-size: 16px;
      line-height: 21px;
      padding-top: 32px;
      color: #333333;
    }
    .sub-title {
      font-weight: 700;
      font-size: 14px;
      line-height: 21px;
      padding-top: 32px;
      color: #333333;
    }
    .title-more {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .el-col {
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      color: #333333;
      .label {
        color: #666666;
      }
    }

    .project-info-base {
    }
  }

  .layout {
    margin-top: 10px;
    .layout-item {
      margin-bottom: 12px;
      // padding: 0 16px;
      box-sizing: border-box;
      background: #fafafa;
      .layout-header {
        height: 50px;
        background: #fafafa;
        display: flex;
        align-items: center;
        cursor: pointer;
        box-sizing: border-box;
        vertical-align: middle;
        line-height: 50px;
        .icon-triangle {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 5px 0 5px 7px;
          border-color: transparent transparent transparent #448e97;
          display: inline-block;
          vertical-align: middle;
        }
        .header-title {
          font-weight: 700;
          font-size: 14px;
          color: #333333;
          margin-left: 10px;
          display: inline-block;
          vertical-align: middle;
        }
      }
      &.active {
        .layout-header {
          .icon-triangle {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 7px 5px 0 5px;
            border-color: #448e97 transparent transparent transparent;
          }
        }
        .layout-content {
          display: block;
        }
      }

      .layout-content {
        display: none;
        background: #fafafa;

        .handle {
          .el-button {
            border: none;
            background-color: transparent;
            &:hover {
              background-color: transparent;
            }
          }
        }
      }
    }

    .el-table {
      .el-table__header-wrapper {
        thead {
          tr th {
            background: #eee;
          }
        }
      }
      .el-table__body-wrapper {
        tr:last-child td {
          border: none;
        }
      }
    }
  }

  :deep(.el-color-picker) {
    height: auto;
    .el-color-picker__mask {
      display: none;
    }
    .el-color-picker__trigger {
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 2px;
    }
    .el-color-picker__color,
    .el-color-picker__color-inner {
      border: none;
      border-radius: 2px;
    }
    .is-icon-arrow-down,
    .el-icon-close:before,
    .el-icon-arrow-down:before {
      display: none;
    }
  }
}
:deep(.el-dialog) {
  .el-dialog__header {
    margin-right: 0px !important;
    .el-dialog__headerbtn {
      top: 0;
      right: 0;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 0 0;
  }
}
.addData {
  padding-top: 32px;

  .handle-bottom {
    display: flex;
  }

  .ser-header {
    display: flex;
    justify-content: space-between;
    // padding: 0 32px;
    margin-bottom: 15px;
    .ser-title {
      font-weight: 700;
      font-size: 16px;
      color: #333333;
    }
    .el-dropdown {
      margin-right: 10px;
    }
  }
  .table-content1 {
    // padding: 0 32px;
    .el-table {
      .el-table__header-wrapper,
      .el-table__fixed-header-wrapper {
        thead {
          tr th {
            background: #fafafa;
          }
        }
      }
      tr.hover-row > td.el-table__cell {
        background-color: #ecf3f4;
      }
      .el-table__body-wrapper {
        tr td {
          background: #fff;
        }
        tr:last-child td {
          border: none;
        }
      }
      .handle {
        .el-button {
          border: none;
          span {
            color: #448e97;
          }
        }
      }
    }
  }
}

.upload-file {
  margin-left: 10px;
  .el-upload-list {
    display: none;
  }
}

.upload-file-series {
  .el-upload-list {
    display: none;
  }
}

.resultTasks {
  width: 270px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  .list {
    width: 100%;
    height: 180px;
    overflow-y: scroll;
    .item {
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      padding: 9px 12px;
      box-sizing: border-box;
      cursor: pointer;
      &.active {
        background: #f0f9fa;
        color: #448e97;
      }
      &:hover {
        background: #f0f9fa;
      }
    }
  }
  .select {
    border-top: 1px solid #e8e8e8;
    padding: 6px 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .el-checkbox {
      display: flex;
      align-items: center;
    }
  }
}

.button-container {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  padding: 7px 8px 7px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  .refResultTaskName {
    min-width: 58px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
  .el-icon-arrow-up {
    position: absolute;
    right: 10px;
    z-index: 2;
  }
  &.active {
    border: 1px solid #448e97;
  }
}
.el-popover {
  padding: 0;
}

.el-select {
  .el-tag .el-select__tags-text {
    max-width: 100% !important;
  }
}
.el-pagination {
  display: flex;
  justify-content: end;
}

.remarkFileUrl {
  color: #448e97;
  cursor: pointer;
}

.label-name {
  color: #448e97;
  cursor: pointer;
}
.formComponent {
  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    border-color: #e4e7ed;
    color: #999;
    cursor: not-allowed;
  }
}
.table-set.el-table {
  thead tr th {
    background-color: #fafafa !important;
  }
  .cell {
    text-align: left !important;
    padding-left: 14px !important;
  }
}
.layout-type {
  .el-tag.el-tag--info {
    background: #f1f2f6;
  }
}
</style>
